<template>
	<div v-show="nullLockCard">
		<div class="card-main clearfix">
			<card-type-b></card-type-b>
		</div>
	</div>
	<div v-else>
		<img class="null-card-img" src="//s1.cximg.com/msweb02/spah5/static/img/artboard.jpg" />
		<p class="null-card-text">暂无不可用套餐卡</p>
	</div>
	<div class="service">客服电话<a href="tel:4008020666">4008 020 666</a></div>
</template>

<script>

	import cardTypeB from '../card-box/card-type-b';
	import common from '../../utils/common';

	export default {

		data: function(){
			return {
				CardData:{}, //我的套餐卡列表
				nullLockCard:false //是否存在不可用的套餐卡
			}
		},
		components: {
			cardTypeB
		},
		ready: function (){
			document.body.scrollTop = 0;
										//已冻结
			var _this = this,loackCard,sortCard = [],notCard = [];
			if(localStorage.lockCard){
				if(localStorage.lockCard === undefined || localStorage.lockCard == '[]'){
					this.nullLockCard = false;
				}else{
					loackCard = JSON.parse(localStorage.lockCard);

					//7：已冻结 //不等于7已过期  //
					loackCard = loackCard.reverse();

					for(var i = 0; i < loackCard.length; i++){
						if(loackCard[i].cardStatus == "7"){
							sortCard.push(loackCard[i]); 
							loackCard[i].cardStatusName = '已冻结';
						}else{
							notCard.push(loackCard[i]);
							loackCard[i].cardStatusName = '不可用';
						}
					}
					loackCard = sortCard.concat(notCard);
					_this.$broadcast("cardTypeBdata",loackCard);
					this.nullLockCard = true;
				}
			}else{
				this.nullLockCard = false;
			}
		}
	}

</script>

<style lang="scss" scoped>
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	
	.card-main{
		padding:0 rem(15);
		margin-top:rem(16);
		margin-bottom:rem(20);
	}
	.service{
		margin:rem(20) 0 rem(20) 0;
		text-align: center;
		color:#666;
		font-size: rem(13);
		a{
			color:#119ef5;
		}

	}
	.null-card-img{
		width:rem(125);
		display:block;
		margin:rem(80) auto rem(20) auto;
	}
	.null-card-text{
		margin-bottom: rem(68);
		text-align:center;
		font-size:rem(14);
		color:#969696;
	}
</style>
